<template>
  <div class="app-container calendar-list-container"> 
    <!-- 卡片列表 -->
    <el-tabs v-model="active" type="card" @tab-click="handleClick">
      <el-tab-pane :label="$t('financial.Labor_cost')" name="first"></el-tab-pane>
      <el-tab-pane :label="$t('financial.General_cost')" name="second"></el-tab-pane>
    </el-tabs>
    <!-- 头部 -->
    <div class="filter-container">
        {{$t('financial.Expense_name')}}
        <el-input clearable v-model="listQuery.disburseName" style="width: 200px;margin-right:50px;margin-top:8px;margin-left:10px" class="filter-item" :placeholder="$t('financial.Please_enter_expense_name')" >
        </el-input>
        <el-button  type='button' icon="el-icon-search" class='el-button el-button--primary' @click="handleFilter">{{$t('financial.Search')}}</el-button>
        <el-button  type='button' icon="el-icon-download" class='el-button el-button--primary' @click="handleDownload">{{$t('financial.Export')}}</el-button>
        <el-button  type='button' icon="el-icon-circle-plus-outline" class='el-button el-button--info' @click="newFormVisible = true">{{$t('financial.Add')}}</el-button>
    </div>
      <!-- 一般支出 -->
    <el-table
      :data="income"
      border
      v-loading='loading.income'
      style="width: 100%">
      <el-table-column prop="id" :label="$t('financial.Serial_number')"> </el-table-column>
      <el-table-column prop="disburseName" :label="$t('financial.Expense_name')"> </el-table-column>
      <el-table-column prop="disburseCrew" :label="$t('financial.Expensing_party')"> </el-table-column>
      <el-table-column prop="type" :label="$t('financial.Settlement_type')"> </el-table-column>
      <el-table-column prop="clearingForm" :label="$t('financial.Settlement_form')"> </el-table-column>
      <el-table-column  :label="$t('financial.Settlement_amount')">
        <template slot-scope="scope">
            {{scope.row.money + '元'}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('financial.Operate')"  class-name="small-padding fixed-width">
        <template slot-scope="scope">
            <div class="fx">
              <el-button  size="mini" type="primary" @click="change(scope.row)">{{$t('financial.Edit')}}</el-button>
              <el-button  size="mini" type="danger" @click="del(scope.row.id)">{{$t('financial.Delete')}}</el-button>
            </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination 
      background 
      @size-change="handleSizeChange1" 
      @current-change="handleCurrentChange1" 
      :current-page="listQuery.pageNo" 
      :page-sizes="[10, 20, 30, 40]" 
      :page-size="listQuery.pageSize" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total1">
      </el-pagination>
    </div>
    <!-- 修改支出 -->
    <el-dialog :title="$t('financial.Modify')" :visible.sync="upFormVisible" style="width:800px;margin:0 auto;">
      <el-form :model="upform" :rules='bindRules1' ref="bindForm1">
        <el-form-item :label="$t('financial.Expense_name')" prop="disburseName">
          <el-input v-model="upform.disburseName" style="width:200px;margin-right:10px"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Expensing_party')" prop='disburseCrew'>
          <el-input v-model="upform.disburseCrew" style="width:200px;margin-right:10px;margin-left:15px"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Settlement_type')" prop='type'>
          <el-select v-model="upform.type" :placeholder="$t('financial.Please_select')" style="width:200px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('financial.Settlement_form')" prop='clearingForm'>
          <el-input v-model="upform.clearingForm"  style="width:200px;margin-right:10px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upFormVisible = false">{{$t('financial.Cancel')}}</el-button>
        <el-button type="primary" @click="upForm">{{$t('financial.Confirm')}}</el-button>
      </div>
    </el-dialog>
    <!-- 新增支出 -->
    <el-dialog :title="$t('financial.Add')" :visible.sync="newFormVisible" style="width:800px;margin:0 auto;">
      <el-form :model="form" :rules='bindRules' ref="bindForm">
        <el-form-item :label="$t('financial.Expense_name')" prop="disburseName">
          <el-input v-model="form.disburseName" style="width:200px;margin-right:10px"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Expensing_party')" prop='disburseCrew'>
          <el-input v-model="form.disburseCrew" style="width:200px;margin-right:10px;margin-left:15px"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Settlement_type')" prop='type'>
          <el-select v-model="form.type" :placeholder="$t('financial.Please_select')" style="width:200px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('financial.Settlement_form')" prop='clearingForm'>
          <el-input v-model="form.clearingForm"  style="width:200px;margin-right:10px"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Settlement_amount')" prop='money'>
          <el-input v-model="form.money" type="number" style="width:200px;margin-right:10px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newFormVisible = false">{{$t('financial.Cancel')}}</el-button>
        <el-button type="primary" @click="newForm">{{$t('financial.Confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getGeneralListByPage ,addGeneral ,deleteGeneralById ,updateGeneralById} from '@/api/financial'
import VePie from 'v-charts/lib/pie'
import VeHistogram from 'v-charts/lib/histogram'
export default {
  name: 'financial_withdrawal',
  data() {
    return {
      active:'second',
        total1: 0,
        income: [],
        options: [{
          value: '年',
        }, 
        {
          value: '月',
        },
        {
          value: '日',
        },],
        listQuery:{
          pageNo: 1,
          pageSize: 10,
          id: '',
          disburseName:'',
        },
        dialog: {
            add: false
        },
        loading: {
          income: false,
          withdraw: false,
          reject:false
        },
        form:{
          disburseName:"",
          disburseCrew:"",
          type:"",
          clearingForm:"",
          money:"",
        },
        upform:{
          id:'',
          disburseName:"",
          disburseCrew:"",
          type:"",
          clearingForm:"",
        },
        upFormVisible:false,
        newFormVisible:false,
        bindRules:{
        disburseName: [
          { required: true, message: '请输入支出名称', trigger: 'blur' }
        ],
        disburseCrew: [
          { required: true, message: '请输入支出方', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入结算类型', trigger: 'blur' }
        ],
        clearingForm: [
          { required: true, message: '请输入结算形式', trigger: 'blur' }
        ],
        money: [
          { required: true, message: '请输入结算金额', trigger: 'blur' }
        ],
      },
      bindRules1:{
        disburseName: [
          { required: true, message: '请输入支出名称', trigger: 'blur' }
        ],
        disburseCrew: [
          { required: true, message: '请输入支出方', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入结算类型', trigger: 'blur' }
        ],
        clearingForm: [
          { required: true, message: '请输入结算形式', trigger: 'blur' }
        ],
        money: [
          { required: true, message: '请输入结算金额', trigger: 'blur' }
        ],
      },
    }
  },
  components: {
    VePie,
    VeHistogram
  },
  methods: {
    // 跳转
    handleClick(e){
      if(e.index == 0){
        this.$router.push('/financial/normalWithdrawal')
      }
    },
    // 导出
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['序号', '支出名称', '支出方','	结算类型','结算形式', '结算金额']
        const filterVal = ['id', 'disburseName','disburseCrew', 'type','clearingForm','money']
        const data = this.formatJson(filterVal, this.income)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '一般支出'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {     
        return v[j]
      }))
    },
    // 获取修改一般支出的列表
    change(item){
      this.upform.id = item.id
      this.upFormVisible = true
      this.upform.disburseName = item.disburseName
      this.upform.disburseCrew = item.disburseCrew
      this.upform.type = item.type
      this.upform.clearingForm = item.clearingForm
    },
    //修改列表成功
    upForm(){
      this.$refs['bindForm1'].validate(async (valid) => {
        if(valid){
          this.loading.income=true
          try {
          const { data } = await updateGeneralById (this.upform)
          this.upFormVisible = false
          this.$message({
            type: 'success',
            message: `修改成功!`
          });
          this.getList()
          this.$refs['bindForm1'].resetFields()
          } catch (error) {
            
          }
          this.loading.income = false
        }  
      })
    },
    // 删除一般支出
    async del(myid){
      console.log(myid)
      const{ data } = await deleteGeneralById({
        id:myid
      })
      this.$message({
        type: 'success',
        message: `删除成功!`
      });
      this.getList();
    },
     //获取一般支出列表
    async getList(){
      this.loading.income=true
      const { data } = await getGeneralListByPage(this.filters)
      this.income = data.records.map((item,index)=>({
        index:index+1,
        ...item
      }))
      this.total1 = data.total
      this.loading.income = false
    },
    // 新增
    newForm(){
      this.$refs['bindForm'].validate(async (valid) => {
        if(valid){
          this.loading.income=true
          try {
            const { data } = await addGeneral (this.form)
            this.newFormVisible = false
            this.$message({
              type: 'success',
              message: `新增成功!`
            });
          this.$refs['bindForm'].resetFields()
          this.getList()
          } catch (error) {
            
          }
          this.loading.income = false
        }  
      })
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    handleSizeChange1(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange1(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
  },
  computed: {
    // 获取列表
    filters() {
      return {
        pageNo: this.listQuery.pageNo,
        pageSize: this.listQuery.pageSize,
        id: this.listQuery.id,
        disburseName: this.listQuery.disburseName
      }
    },
  },
  created() {
    this.getList();
  }
}
</script>
<style lang='scss' scoped>
.cell {
  a {
    color: #409eff;
  }
}
.card-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
.el-card /deep/ .el-card__header{
    border-bottom: none
}  

</style>
